<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标签页组件 - Layui</title>
    <link rel="stylesheet" href="../src/css/layui.css">
  </head>
<body>
  <div class="layui-container layui-padding-3 layui-text">
    <h2>动态操作</h2>
    <div class="layui-tabs layui-hide-v" id="demoTabs1" lay-options="{closable: true, headerMode:'scroll'}">
      <ul class="layui-tabs-header">
        <li lay-id="aaa" lay-closable="false">Tab1</li>
        <li lay-id="bbb">Tab2</li>
        <li lay-id="ccc">Tab3</li>
        <li lay-id="ddd">Tab4</li>
        <li lay-id="eee">Tab5</li>
        <li lay-id="fff">Tab6</li>
      </ul>
      <div class="layui-tabs-body">
        <div class="layui-tabs-item">Tab Content-1</div>
        <div class="layui-tabs-item">Tab Content-2</div>
        <div class="layui-tabs-item">Tab Content-3</div>
        <div class="layui-tabs-item">Tab Content-4</div>
        <div class="layui-tabs-item">Tab Content-5</div>
        <div class="layui-tabs-item">Tab Content-6</div>
      </div>
    </div>

    <div class="layui-btn-container">
      <button class="layui-btn" onclick="layui.tabs.change('demoTabs1', 'ccc')">切换到：Tab3</button>
      <button class="layui-btn" onclick="layui.tabs.change('demoTabs1', 1)">切换到：第 2 项</button>
      <button class="layui-btn" onclick="layui.tabs.close('demoTabs1', 'ddd')">关闭：Tab4</button>
      <button class="layui-btn" onclick="layui.tabs.close('demoTabs1', 1)">关闭：第 2 项</button>
      <button class="layui-btn" lay-on="add">添加 Tab</button>
    </div>

    <h2>方法渲染</h2>
    <div id="demoTabs2"></div>

    <h2>卡片风格</h2>
    <div class="layui-tabs layui-tabs-card" lay-options="{index: 1}">
      <ul class="layui-tabs-header">
        <li>标题1</li>
        <li>标题2</li>
        <li><a href="" target="_blank" class="layui-font-blue">跳转项</a></li>
        <li class="layui-disabled" lay-unselect>禁选项</li>
        <li>标题5</li>
        <li>标题6</li>
      </ul>
      <div class="layui-tabs-body">
        <div class="layui-tabs-item">内容-1</div>
        <div class="layui-tabs-item">内容-2</div>
        <div class="layui-tabs-item">内容-3</div>
        <div class="layui-tabs-item">内容-4</div>
        <div class="layui-tabs-item">内容-5</div>
        <div class="layui-tabs-item">内容-6</div>
      </div>
    </div>

    <h3>卡片 + 边框</h3>
    <div class="layui-tabs layui-tabs-card layui-panel layui-inline">
      <ul class="layui-tabs-header layui-bg-tint">
        <li class="layui-this">标题1</li>
        <li>标题2</li>
        <li>标题3</li>
        <li>标题4</li>
        <li>标题5</li>
        <li>标题6</li>
      </ul>
      <div class="layui-tabs-body">
        <div class="layui-tabs-item layui-show">
          <div class="layui-form">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
            </select>
          </div>
        </div>
        <div class="layui-tabs-item">2</div>
        <div class="layui-tabs-item">3</div>
        <div class="layui-tabs-item">4</div>
        <div class="layui-tabs-item">5</div>
        <div class="layui-tabs-item">6</div>
      </div>
    </div>

    <h2>标签 HASH 定位</h2>
    <div class="layui-tabs layui-hide-v" id="demoTabs-hash">
      <ul class="layui-tabs-header">
        <li lay-id="A1" class="layui-this"><a href="#A1">标题题题题题题1</a></li>
        <li lay-id="A2"><a href="#A2">标题题题2</a></li>
        <li lay-id="A3"><a href="#A3">标题3</a></li>
        <li lay-id="A4"><a href="#A4">标题题题题题题题4</a></li>
        <li lay-id="A5"><a href="#A5">标题5</a></li>
        <li lay-id="A6"><a href="#A6">标题6</a></li>
        <li lay-id="A7"><a href="#A7">标题7</a></li>
        <li lay-id="A8"><a href="#A8">标题题题题题题题8</a></li>
      </ul>
    </div>

    <h2>标签嵌套</h2>
    <div class="layui-tabs layui-tabs-card" lay-options="{headerMode:'normal'}">
      <ul class="layui-tabs-header">
        <li class="layui-this">标题1</li>
        <li>标题2</li>
        <li>标题3</li>
      </ul>
      <div class="layui-tabs-body" style="padding: 16px;">
        <div class="layui-tabs-item layui-show">
          <div class="layui-tabs" lay-options="{headerMode:'normal'}">
            <ul class="layui-tabs-header">
              <li class="layui-this">标题 1-1</li>
              <li>标题 1-2</li>
            </ul>
            <div class="layui-tabs-body">
              <div class="layui-tabs-item layui-show">1-1</div>
              <div class="layui-tabs-item">1-2</div>
            </div>
          </div>
        </div>
        <div class="layui-tabs-item">
          <div class="layui-tabs" lay-options="{headerMode:'normal'}">
            <ul class="layui-tabs-header">
              <li class="layui-this">标题 2-1</li>
              <li>标题 2-2</li>
              <li>标题 2-3</li>
            </ul>
            <div class="layui-tabs-body">
              <div class="layui-tabs-item layui-show">2-1</div>
              <div class="layui-tabs-item">2-2</div>
              <div class="layui-tabs-item">2-3</div>
            </div>
          </div>
        </div>
        <div class="layui-tabs-item">3</div>
        <div class="layui-tabs-item">4</div>
        <div class="layui-tabs-item">5</div>
      </div>
    </div>

    <h2>给任意元素绑定 tabs 切换功能</h2>
    <div id="demoTabs3">
      <style>
        #demoTabsHeader .layui-btn.layui-this{border-color: #eee; color: #000; background: none;}
        #demoTabsBody .test-item{display: none;}
      </style>
      <div class="layui-btn-container" id="demoTabsHeader">
        <button class="layui-btn layui-this">标题 1</button>
        <button class="layui-btn">标题 2</button>
        <button class="layui-btn">标题 3</button>
      </div>
      <div class="layui-panel layui-padding-3" id="demoTabsBody">
        <div class="test-item layui-show">内容 111</div>
        <div class="test-item">内容 222</div>
        <div class="test-item">内容 333</div>
      </div>
    </div>

  </div>

  <script src="../src/layui.js"></script>
  <script>
  layui.use(function() {
    var tabs = layui.tabs
    var util = layui.util;
    var layer = layui.layer;
    var dropdown = layui.dropdown;

    // 自定义事件
    util.on({
      add: function(){
        var n = Math.random()*1000 | 0; // 演示标记

        //添加标签
        tabs.add('demoTabs1', {
          title: 'New Tab '+ n, // 此处加 n 仅为演示区分，实际应用不需要
          content: 'New Tab Content '+ n,
          id: 'new-'+ n,
          aaa: 'attr-'+ n, // 自定义属性，其中 aaa 可任意命名
          // mode: 'curr',
          done: function(params) {
            console.log(params);
          }
        });
      }
    });

    // tabs 关闭前的事件
    tabs.on('beforeClose(demoTabs1)', function(data) {
      console.log('beforeClose', data);

      // 关闭确认提示
      layer.confirm(`确定关闭标签「${this.innerText}」吗？`, function(i) {
        tabs.close('demoTabs1', data.index, true); // 强制关闭对应的标签项
        layer.close(i); // 关闭确认框
      });
      return false; // 阻止标签默认关闭
    });

    // tabs 关闭后的事件
    tabs.on('afterClose(demoTabs1)', function(data) {
      console.log('afterClose', data);
    });

    // tabs 切换前的事件
    tabs.on('beforeChange(demoTabs1)', function(data) {
      console.log('beforeChange', data);

      // 切换确认提示
      /*layer.confirm(`确定从「当前标签」切换到标签「${this.innerText}」吗？`, function(i) {
        tabs.change('demoTabs1', data.to.index, true); // 强制切换
        layer.close(i); // 关闭确认框
      });
      return false; // 阻止标签默认关闭*/
    });

    // tabs 切换后的事件
    tabs.on('afterChange(demoTabs1)', function(data) {
      console.log('afterChange', data);
    });

    // 为标签头添加上下文菜单
    dropdown.render({
      elem: '#demoTabs1 .layui-tabs-header>li',
      trigger: 'contextmenu',
      data: [{
        title: '关闭',
        type: 'this'
      }, {
        title: '关闭其他标签页',
        type: 'other'
      }, {
        title: '关闭右侧标签页',
        type: 'right'
      }, {
        type: '-'
      }, {
        title: '关闭所有标签页',
        type: 'all'
      }],
      click: function(data, othis, event) {
        var index = this.elem.index();
        if (data.type === 'this') {
          tabs.close('demoTabs1', index); // 关闭当前标签
        } else {
          tabs.closeMult('demoTabs1', data.type, index); // 批量关闭标签
        }
      }
    });

    // 方法渲染
    tabs.render({
      elem: '#demoTabs2',
      header: [
        { title: 'Tab1' },
        { title: 'Tab2' },
        { title: 'Tab3' }
      ],
      body: [
        { content: 'Tab content 1' },
        { content: 'Tab content 2' },
        { content: 'Tab content 3' }
      ],
      // index: 1, //初始选中项
      // className: 'layui-tabs-card',
      // closable: true
    });


    // HASH 初始定位
    var hash = layui.hash();
    tabs.change('demoTabs-hash', hash.href);

    // 给任意元素绑定 Tab 功能
    tabs.render({
      elem: '#demoTabs3',
      header: ['#demoTabsHeader', '>button'],
      body: ['#demoTabsBody', '>.test-item']
    });
  });
  </script>
</body>
</html>
